#{extends 'main.html' /}
<h2><a style ="color:#400040;" href = "@{Projects.showProject(project.getEntityId())}">${project.name}</a> > <a style ="color:#400040;" href = "@{UserStories.listStories(project.getEntityId())}">User Stories</a> > <a style ="color:#400040;" href = "@{UserStories.show(storyId)}">Edit</a> > Associate Roles</h2><hr/>
<a href="create/${project.getEntityId()}/${storyId}/1">+ Add New Role</a><br/><br/>
#{if allAppRoles}
    #{form @ApplicationRoles.submitAssociateRole(roleId,storyId), id: 'associateRole'}
    #{list items:allAppRoles, as:'appRole'}<input type="checkbox" value="${appRole.getEntityId()}" id="roleId" name = "roleId">&nbsp;&nbsp;${appRole.name}
    <br/>
    <br/>
    #{/list}
    <br>
    <input type="submit" value="Submit">#{/form}
    <br>
	#{/if}
	#{else}
	There are no more roles you can associate to this user story.
	#{/else}
<script language = "JavaScript">
    $(function(){
        $('form').jqTransform({
            imgPath: 'public/stylesheets/img'
        });
    });
    $().ready(function(){
        $('#associateRole').validationEngine()
    });
</script>
